<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="100px">
            <el-form-item label="用户名称" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable />
            </el-form-item>
            <el-form-item label="用户手机号" prop="phoneNumber">
                <el-input v-model="queryParams.phoneNumber" placeholder="请输入用户手机号" clearable />
            </el-form-item>
            <el-form-item label="注册开始时间">
                <el-date-picker clearable v-model="queryParams.starTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="注册结束时间">
                <el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-finished" size="mini" v-hasPermi="['system:user:isadd']"
                    @click="addUser()">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
                    v-hasPermi="['system:user:import']">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-upload2" size="mini" @click="handleExport"
                    v-hasPermi="['system:clue:export']">导出</el-button>
            </el-col> -->
            <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>

        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="用户名称" align="center" prop="nickName" />
            <el-table-column label="手机号" align="center" prop="phoneNumber" />
            <el-table-column label="咨询次数(次)" align="center" prop="consultCount" />
            <el-table-column label="发布次数(次)" align="center" prop="issueCount"></el-table-column>
            <el-table-column label="用户来源" align="center" prop="sourceWeb">
                <template slot-scope="{row}">
                    <span>{{ forrmatterEnmu(Enmu.sourceWeb, row.sourceWeb) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="注册时间" align="center" prop="createTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button size="mini" type="text" @click="queryInfo(row)">查看</el-button>
                    <!-- <el-button size="mini" type="text" @click="editUser(row)">修改</el-button>
                    <el-dropdown size="mini" @command="(command) => handleCommand(command, row)"
                        v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
                        <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
                                v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
                            <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
                                v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <detail-dialog :showDialog="showDetailDialog" :baseInfo="baseInfo" pageType="2" @close="close"></detail-dialog>
        <el-dialog width="700px" :title="title" :visible.sync="innerVisible" append-to-body>
            <div>
                <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户昵称" prop="nickName">
                                <el-input v-model="addForm.nickName" placeholder="请输入用户昵称" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="归属部门" prop="deptId">
                                <treeselect v-model="addForm.deptId" :options="deptOptions" :show-count="true"
                                    placeholder="请选择归属部门" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="手机号码" prop="phonenumber">
                                <el-input v-model="addForm.phonenumber" placeholder="请输入手机号码" maxlength="11" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="addForm.email" placeholder="请输入邮箱" maxlength="50" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item v-if="addForm.userId == undefined" label="用户名称" prop="userName">
                                <el-input v-model="addForm.userName" placeholder="请输入用户名称" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item v-if="addForm.userId == undefined" label="用户密码" prop="password">
                                <el-input v-model="addForm.password" placeholder="请输入用户密码" type="password"
                                    maxlength="20" show-password />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户性别">
                                <el-select v-model="addForm.sex" placeholder="请选择性别">
                                    <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value"
                                        :label="dict.label" :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态">
                                <el-radio-group v-model="addForm.status">
                                    <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                                        :label="dict.value">{{ dict.label }}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="岗位">
                                <el-select v-model="addForm.postIds" multiple placeholder="请选择岗位">
                                    <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName"
                                        :value="item.postId" :disabled="item.status == 1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="角色">
                                <el-select v-model="addForm.roleIds" multiple placeholder="请选择角色">
                                    <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                                        :value="item.roleId" :disabled="item.status == 1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input v-model="addForm.remark" type="textarea" placeholder="请输入内容"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="innerVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <div class="el-upload__tip" slot="tip">
                        <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
                    </div>
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                        @click="importTemplate">下载模板</el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listUser } from "@/api/crm/userManage";
import { addClue, getMarketList, manualDistribution } from "@/api/crm/clueLibrary";
import { deptTreeSelect, getUser, updateUser, addUser, resetUserPwd } from "@/api/system/user";
import DetailDialog from "@/views/crm/clue/detailDialog.vue";
import ProviceSelect from "@/components/ProviceSelect/index.vue"
import Enmu from '@/utils/enmu.js'
import { forrmatterEnmu } from "@/utils/index"
import { mapGetters } from "vuex"
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "UserManage",
    dicts: ['sys_normal_disable', 'sys_user_sex'],
    data() {
        return {
            fileUpload: process.env.VUE_APP_BASE_API + "/clue/admin/batchImportClue",
            headers: {
                Authorization: "Bearer " + getToken()
            },
            // 用户导入参数
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/system/user/importData"
            },
            // 显示搜索条件
            showSearch: true,
            // 非单个禁用
            single: true,
            ids: [],
            // 非多个禁用
            multiple: true,
            Enmu,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: null,
                phoneNumber: null,
                startTime: null,
                endTime: null
            },
            baseInfo: {},
            showDetailDialog: false,
            innerVisible: false,
            addForm: {},
            loading: false,
            userList: [],
            total: 0,
            defaultAimCity: {},
            defaultCity: {},
            selectMarketIds: '',
            fileList: [],
            uploadDialog: false,
            // 表单校验
            rules: {
                userName: [
                    { required: true, message: "用户名称不能为空", trigger: "blur" },
                    { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
                ],
                nickName: [
                    { required: true, message: "用户昵称不能为空", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "用户密码不能为空", trigger: "blur" },
                    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
                    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
                ],
                email: [
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"]
                    }
                ],
                phonenumber: [
                    {
                        required: true, message: "手机号不能为空", trigger: "blur",
                    },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ]
            },
            // 岗位选项
            postOptions: [],
            // 角色选项
            roleOptions: [],
            title: "",
            // 默认密码
            initPassword: undefined,
            // 部门树选项
            deptOptions: undefined,
        };

    },
    components: { DetailDialog, ProviceSelect, Treeselect },
    created() {
        this.getList();
        this.getDeptTree();
        this.getConfigKey("sys.user.initPassword").then(response => {
            this.initPassword = response.msg;
        });
    },
    computed: {
        ...mapGetters(['allCityList'])
    },
    methods: {
        forrmatterEnmu,
        // 省市区转换成中文
        fomatterAdressName(code) {
            let index = this.allCityList.findIndex(ele => ele.id == code);
            return index > -1 ? this.allCityList[index].cityName : code;
        },
        queryInfo(row) {
            this.showDetailDialog = true;
            this.baseInfo = { ...row };
        },
        close() {
            this.showDetailDialog = false;
            this.getList();
        },
        /** 查询【请填写功能名称】列表 */
        getList() {
            this.loading = true;
            listUser(this.queryParams).then(response => {
                this.userList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        resetQueryForm() {
            this.addForm = {
                userId: undefined,
                deptId: undefined,
                userName: undefined,
                nickName: undefined,
                password: undefined,
                phonenumber: undefined,
                email: undefined,
                sex: undefined,
                status: "0",
                remark: undefined,
                postIds: [],
                roleIds: []
            }
        },
        submitForm() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    if (this.addForm.userId != undefined) {
                        updateUser(this.addForm).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.innerVisible = false;
                            this.getList();
                        });
                    } else {
                        addUser(this.addForm).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.innerVisible = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams = {};
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/user/export', {
                ...this.queryParams
            }, `user_${new Date().getTime()}.xlsx`)
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.clueId)
            this.single = selection.length !== 1
            this.multiple = !selection.length;
        },
        uploadSuccess() {
            this.$modal.msgSuccess("上传成功");
            this.uploadDialog = false;
            this.getList();
        },
        addUser() {
            this.title = "新增用户";
            this.resetQueryForm();
            getUser().then(response => {
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
                this.innerVisible = true;
                this.title = "添加用户";
                this.addForm.password = this.initPassword;
            });
        },
        editUser(row) {
            this.title = "修改用户";
            this.resetQueryForm();
            this.innerVisible = true;
            const userId = row.userId || this.ids;
            getUser(userId).then(response => {
                this.addForm = response.data;
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
                this.$set(this.addForm, "postIds", response.postIds);
                this.$set(this.addForm, "roleIds", response.roleIds);
                this.open = true;
                this.title = "修改用户";
                this.addForm.password = "";
            });
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                case "handleResetPwd":
                    this.handleResetPwd(row);
                    break;
                case "handleAuthRole":
                    this.handleAuthRole(row);
                    break;
                default:
                    break;
            }
        },
        /** 重置密码按钮操作 */
        handleResetPwd(row) {
            this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                inputPattern: /^.{5,20}$/,
                inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
                inputValidator: (value) => {
                    if (/<|>|"|'|\||\\/.test(value)) {
                        return "不能包含非法字符：< > \" ' \\\ |"
                    }
                },
            }).then(({ value }) => {
                resetUserPwd(row.userId, value).then(response => {
                    this.$modal.msgSuccess("修改成功，新密码是：" + value);
                });
            }).catch(() => { });
        },
        /** 分配角色操作 */
        handleAuthRole: function (row) {
            const userId = row.userId;
            this.$router.push("/system/user-auth/role/" + userId);
        },
        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "用户导入";
            this.upload.open = true;
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download('system/user/importTemplate', {
            }, `user_template_${new Date().getTime()}.xlsx`)
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
            this.getList();
        },
    }
};
</script>
<style lang="scss" scoped>
.row-between {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

::v-deep .el-timeline-item__node {
    background-color: #02A7F0 !important;
}

::v-deep .el-timeline-item__tail {
    position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px solid #02A7F0;
}
</style>